$(function(){
    let layer=layui.layer
    initArtCateList()
    function initArtCateList(){
        axios({
            url:'/my/article/cates',
            method:'get',
        }).then(res=>{
            //成功回调
         if (res.data.status !=0) {
             return layer.msg(res.data.message)
         }
         let Arr=[]
         res.data.data.forEach(function(ele){
             Arr.push(`
               <tr>
                        <td>${ele.Id}</td>
                        <td>${ele.name}</td>
                        <td>${ele.alias}</td>
                        <td>
                            <button data-id="${ele.Id}" class="btn-edit layui-btn layui-btn-xs">修改</button>
                            <button data-id="${ele.Id}" class="del-edit layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
             `    
             )
         })
         $('tbody').empty().html(Arr.join(''))
        });
    }
    //添加弹出层
    let indexAdd=0
    $('#addBtn').on('click',function(){
       indexAdd=layer.open({
            type: 1,
            title: '添加文章类别',
            area:['500px','248px'],
            content: `
            <form id="addForm" class="layui-form" action="">
                 <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别称</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别称" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>  
                </div>
            </form>`
        });     
    })
    //添加文章分类
    $('body').on('submit','#addForm',function(e){
        e.preventDefault()
       axios({
           url:'/my/article/addcates',
           method:'post',
           data:$(this).serialize()
       }).then(res=>{
           //成功回调
         if (res.data.status !=0) {
             return layer.msg(res.data.message)
         }
         layer.msg('恭喜你添加成功')
          initArtCateList()
          layer.close(indexAdd)
       });
    })
    // 修改弹出层
     let indexEdit=0
     let idone=0
    $("tbody").on('click',".btn-edit",function(){
        indexEdit=layer.open({
            type: 1,
            title: '修改文章类别',
            area:['500px','248px'],
            content: `
            <form id="editForm" class="layui-form" lay-filter="editForm">
            <input type="hidden" name="Id">
                 <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别称</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别称" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即修改</button>
                        <button id="resBtn" type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>  
                </div>
            </form>`
        }); 
        let id=$(this).attr('data-id')
        idone=$(this).attr('data-id')
        axios({
            url:'/my/article/cates/'+id,
            method:'GET',
        }).then(res=>{ 
            if (res.data.status!=0) {
                return layer.msg(red.data.message)
            }
            layui.form.val("editForm",res.data.data)
        });
    })
    //修改文章分类
    $("body").on('submit',"#editForm",function(e){
        e.preventDefault()
        axios({
            url:'/my/article/updatecate',
            method:'post',
            data:$(this).serialize()
        }).then(res=>{
            if (res.data.status !=0) {
              return layer.msg(res.data.message)
            }
            layer.msg("恭喜你,修改文章类别成功")
            initArtCateList()
            layer.close(indexEdit)
        });
    })
    //重置
  $('body').on('click','#resBtn',function(e){
    e.preventDefault()
    axios.get(`/my/article/cates/${idone}`).then(res => {
      console.log(res);
      layui.form.val("editForm",res.data.data)
    })
  })

    //删除
    $("tbody").on('click',".del-edit",function(){
        let id=$(this).attr("data-id")
        layer.confirm('确定删除吗',{icon:3,title:'提示'},function(index){
            axios({
                url:'/my/article/deletecate/'+id,
                method:'get',
            }).then(res=>{
             if (res.data.status !=0) {
                 return layer.msg(res.data.message)
             }
             layer.msg("恭喜你删除成功")
             initArtCateList()
            });
            layer.close(index)
        })
    })
})